<template>
	<view class="declaration-center">
		<view class="top">
			<!-- 搜索框 -->
			<view class="search">
				<input class="search-input" type="text" focus @input="onKeyInput" placeholder="请输入您要搜索的商品"/>
				<image class="search-icon top-icon" :src="$util.img('/upload/uniapp/declaration/icon-search.png')" @click="search"></image>
			</view>

			<image class="menu-icon top-icon" @click="$util.redirectTo('/promotionpages/declaration/order-list')" :src="$util.img('/upload/uniapp/declaration/icon-menu.png')"></image>
		</view>
		<!-- 列表 -->
		<view class="list">
			<radio-group name="" @change="radioChange">
				<label class="list-item" v-for="item in list" :key="item.id">
					<radio :value="String(item.id)"/>
					<view class="product">
						<image class="product-image" :src="goodsImg(item.goods_image)" mode="aspectFit"></image>
						<view class="product-info">
							<view class="product-name">{{item.goods_name}}</view>
							<view class="product-desc">
								<!-- <view class="product-desc-item">型号:大号</view> -->
								<!-- <view class="product-desc-item"> 颜色:白色的</view> -->
							</view>
							<view class="product-price">{{item.price}}</view>
						</view>
					</view>
				</label>
			</radio-group>
			<ns-empty v-if="!list.length" text="暂无相关商品" :isIndex="!1"></ns-empty>
		</view>
		<view class="combined">
			<view class="combined-amount">合计：<view class="combined-value">¥{{selectGoods?selectGoods.price:0}}</view>
			</view>
			<button :disabled="!submitable" type="default" class="combined-button" @click="toDebt">去报单</button>
		</view>
		<loading-cover ref="loadingCover"></loading-cover>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [],
				searchStr:'',//搜索信息
				selectGoods:'',//选中商品信息
				page:1,
				page_size:15,
				page_count:''
			};
		},
		computed: {
			submitable() {
				return this.selectGoods ? true : false;
			}
		},
		onLoad(options) {
			uni.setNavigationBarTitle({
				title: '报单中心'
			})
		},
		onShow() {
			if(uni.getStorageSync('token')){
				this.page = 1;
				this.getListData()
			} else {
				this.$util.redirectTo(
					'/otherpages/login/login/login', {
						back: '/promotionpages/declaration/declaration-center'
					},
					'redirectTo'
				);
			}
		},
		onReachBottom(){
			this.getMoreData()
		},
		methods: {
			goodsImg(imgStr) {
				let imgs = imgStr.split(',');
				return imgs[0] ? this.$util.img(imgs[0], {
					size: 'mid'
				}) : this.$util.getDefaultImage().default_goods_img;
			},
			search(){//搜索
				this.page = 1;
				this.getListData()
			},
			onKeyInput:function(event){
				this.searchStr=event.target.value
			},
			navigateTo(url) {
				uni.navigateTo({
					url
				})
			},
			toDebt() {
				if (!this.selectGoods) {
					return this.$util.showToast({ title: '请选择报单商品！'});
				}
				uni.setStorageSync("declarationGoods", this.selectGoods);
				this.navigateTo(`./declaration-order`);
			},
			radioChange:function(evt){
				for(let i=0;i<this.list.length;i++){
					if(this.list[i].id === Number(evt.detail.value)){
						this.selectGoods = this.list[i]
					}
				}
			},
			getListData(){
				this.$api.sendRequest({
					url:'/declaration/api/Declaration/getGoodsLists',
					data:{
						goods_name:this.searchStr,
						page:this.page,
						page_size:this.page_size
					},
					success:res =>{
						if(res.code==0){
							let newArr = []
							newArr = res.data.list
							if(this.page==1){
								this.list = []
							}
							this.list = this.list.concat(newArr)
							this.page_count = res.data.page_count
						}
						if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
					},
					fail: res => {
						if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
					}
				});
			},
			getMoreData(){
				if(this.page < this.page_count){
					this.page++;
					this.getListData();
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import './style.scss';

	.declaration-center {}

	.top {
		padding: 20rpx 30rpx;
		width: 750rpx;
		height: 112rpx;
		background: #FFFFFF;
		@include flex(space-between, center);

		.top-icon {
			width: 48rpx;
			height: 48rpx;
		}

		.search {
			padding: 0 40rpx;
			width: 620rpx;
			height: 68rpx;
			background: #F8F8F8;
			border-radius: 34rpx;
			@include flex(space-between);

			.search-input {
				width: 500rpx;
				font-size: 24rpx;
				color: #606266;
			}

			.search-icon {
				width: 48rpx;
				height: 48rpx;
				// @include bgm('icon-search.png');
			}
		}

		.menu-icon {
			width: 48rpx;
			height: 48rpx;
			// @include bgm('icon-menu.png');
		}
	}

	.list {
		padding: 0 30rpx;

		.list-item {
			padding: 20rpx 30rpx;
			margin-top: 24rpx;
			@include flex(space-between, center);
			background-color: #fff;
			border-radius: 8rpx;
		}
	}
</style>
